<script setup>
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox, ElTag, ElImage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import * as admin from '@/api/index.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

const records = ref([]);

const searchDate = ref(""); // 存储选择的日期
const currentPage = ref(1);
const pageSize = 10;
const total = ref(0);


const findData = async () => {
  const res = await admin.findCourseEnrollment({
    currentPage: currentPage.value,
    token: tokenStore.token,
    createdAt: searchDate.value
  });
  if (res.code == 0) {
    records.value = res.data;
    total.value = res.total;
  }
};

// **搜索**
const searchByDate = () => {
  currentPage.value = 1; // 重置到第一页
  findData();
};

const handlePageChange = (page) => {
  currentPage.value = page;
  findData();
};

findData()
</script>

<template>
    <div class="container">
      <!-- 日期检索 -->
      <!-- <div class="search-bar">
        <el-date-picker
          v-model="searchDate"
          type="date"
          placeholder="请选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          class="date-picker"
        />
        <el-button type="primary" @click="searchByDate">🔍 搜索</el-button>
      </div> -->
  
      <!-- 课程记录 -->
      <el-row :gutter="24" justify="center">
        <el-col v-for="record in records" :key="record.id" :span="24" style="margin-top: 20px;">
          <el-card class="record-card">
            <div class="record-content">
              <img :src="record.img" class="record-image" />
              <div class="record-info">
                <h3>{{ record.course }}</h3>
                <p class="description">{{ record.courseContent }}</p>
                <p class="date">📅 学习时间：{{ record.enrolledAt }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
        />
      </div>
    </div>
</template>
  
<style scoped>
  .container {
    padding: 20px;
    max-width: 1000px; /* 设置页面最大宽度 */
    margin: 0 auto; /* 居中显示 */
  }
  
  /* 搜索栏 */
  .search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
  }
  .date-picker {
    width: 200px;
  }
  
  /* 课程卡片 */
  .record-card {
    height: 160px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .record-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* 课程内容 */
  .record-content {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  .record-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 15px;
  }
  .record-info {
    flex: 1;
  }
  .description {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
  }
  .date {
    font-size: 13px;
    color: #999;
  }
  
  /* 分页 */
  .pagination {
    margin-top: 20px;
    text-align: center;
  }




  
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

::v-deep(.el-pagination) {
  font-size: 18px; 
}

::v-deep(.el-pagination .el-pager li) {
  padding: 0 12px;    
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}

::v-deep(.el-pagination button) {
  font-size: 18px;
  padding: 0 12px;
}
</style>
  
  
